<template>
  <div class="globalContrastOpen">
    <pubChunk v-if="globalContrastOpenView" class="contrastOpen">
      <div slot="title">已选列表（{{list.length}}）</div>
      <div slot="headLeft">
        <span class="iconfont icon-a-suoxiaoIcon" @click="showOpen=false"></span>
        <span class="iconfont icon-a-guanbiIcon" @click="closeOpen"></span>
      </div>
      <div class="content">
        <p class="flex-hc-sb" v-for="(item, i) in list" :key="i">
          <span class="name tof">【{{typeList[item.contrastObj.type-1]}}】{{item.contrastObj.name}}</span>
          <i class="pointer el-icon-close" @click="closeItemHandle(i, item.contrastObj)"></i>
        </p>
      </div>
      <template slot="footer">
        <div class="pubChunk_footer">
          <el-button v-show="list.length" size="small" @click="clearListhandle">清空</el-button>
          <el-button size="small" type="primary" @click="contrastHandle">对比</el-button>
        </div>
      </template>
    </pubChunk>
    <div v-show="!showOpen" class="fixTip" @click="showOpen=!showOpen"><span class="iconfont icon-ziliaoduibi"></span> <span style="padding-left: 4px;">对比</span></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import pubChunk from '@/components/investComn/pubChunk.vue'
import { randomNum } from '@/utils/pro'

export default {
  components: { pubChunk },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      typeList: ['策略', '分类', '组合', '投资', '子投资', '投资组合'],
      showOpen: false
    }
  },
  computed: {
    ...mapGetters(["globalContrastOpenView"]),
  },
  watch: {
    showOpen(val) {
      this.$store.commit('contrast/toggleShowOpen', val)
    },
    globalContrastOpenView(val) { // 修复点对比返回之前列表页，对比弹窗未全部关闭的问题
      this.showOpen = val
    }
  },
  methods: {
    closeOpen() {
      if(this.list.length) {
        this.$confirm('确认清空对比列表？', '提示', {
          type: 'warning'
        }).then(_ => {
          this.$store.commit('contrast/clearContrastList')
          this.showOpen = false
        }).catch(_ => {})
      }else {
        this.showOpen = false
      }
    },
    closeItemHandle(i, obj) {
      this.$store.commit('contrast/removeContrastList', i)
    },
    clearListhandle() {
      this.$confirm('确认清空对比列表？', '提示', {
        type: 'warning'
      }).then(_ => {
        this.$store.commit('contrast/clearContrastList')
      }).catch(_ => {})
    },
    contrastHandle() {
      // if(this.list.length<2) {
      //   this.$message({
      //     type: 'warning',
      //     message: '请先勾选列表中2条以上策略',
      //     duration: 2000
      //   })
      //   return false
      // }
      if(this.list.length>20) {
        this.$message({
          type: 'warning',
          message: '对比策略不得多于20条',
          duration: 2000
        })
        return false
      }
      const res_list = this.list.map(item => {
        return {
          ...item.contrastObj
        }
      })
      this.$store.commit('contrast/clearContrastList')
      this.showOpen = false
      const id = randomNum(6)
      setTimeout(() => { // 等待窗口代码关闭执行
        this.$router.push({
          path: `/policyManage/contrast/${id}`,
          query: {
            list: JSON.stringify(res_list)
          }
        })
      }, 20)
    }
  }
}
</script>

<style lang="scss" scoped>
.globalContrastOpen {
  position: relative;
  .contrastOpen {
    z-index: 1000;
    position: fixed;
    right: 20px;
    bottom: calc(50vh - 240px);
    width: 400px;
    height: 480px;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 0px rgba(4, 14, 46, 0.1);
    border-radius: 4px;
    border: 1px solid #D9D9D9;
    }
  .content {
    p {
      height: 30px;
      padding: 0 8px;
      background: rgba(236, 241, 246, 0.5);
      border-radius: 2px;
      & + p { margin-top: 4px; }
      &:hover {
        color: #1890FF;
      }
      .name {
        width: 300px;
      }
    }
  }
  .pubChunk_footer {
    padding: 0 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .fixTip {
    z-index: 1000;
    position: fixed;
    right: 0;
    bottom: 10%;
    width: 106px;
    user-select: none;
    line-height: 44px;
    cursor: pointer;
    text-align: center;
    background: #E6F7FF;
    box-shadow: 0px 4px 10px 0px rgba(4, 14, 46, 0.1);
    border-radius: 100px 0px 0px 100px;
    font-size: 18px;
    color: #1890FF;
    font-weight: 500;
  }
  .icon-a-suoxiaoIcon,.icon-a-guanbiIcon {
    font-size: 22px;
    color: #D9D9D9;
    cursor: pointer;
  }
}
</style>